<template>
    <view class="index">
        <!-- <button @tap="mylogin">111</button> -->
        <view class="calenShow">实时用电监控</view>
        <view class="index_header">
            <view class="index_headerCenter">
                <WaterPolo :text="latest.total" />
            </view>
            <view class="index_headerText">
                <view class="item"
                    >电压:{{ parseInt(latest.vData * 0.0001) }}V</view
                >
                <view class="item">电流:{{ latest.aData * 0.001 }}A</view>
                <view class="item"
                    >电功率:{{ parseInt(latest.pData * 0.0001) }}w</view
                >
                <view class="item">本日电耗:{{ latest.total }}wh</view>
            </view>
        </view>
        <view class="calenShow" v-if="!NoData && orderListSel">
            {{ dateSel2 }}：电能消耗{{
                orderListSel[`date_${dateIndex}`]
                    ? orderListSel[`date_${dateIndex}`]
                    : 0
            }}w
        </view>
        <view class="calenShow" v-if="NoData"> 无该月数据 </view>

        <view class="Mycalendarbox">
            <view class="Mycalendarbox_header">
                {{ monthCN }}月 {{year}}
                <view class="page-section">
                    <view>
                        <picker mode="date" @change="onDateChange">
                            <view class="picker">
                                选择日期：{{ dateSel }}
                            </view>
                        </picker>
                    </view>
                </view>
            </view>
            <view class="Mycalendarbox_body">
                <Mycalendar
                    :firstdate="firstDate"
                    :month="month"
                    :nowdate="nowdate"
                    @clickItem="onclickItem"
                />
            </view>
        </view>
        <view class="calenShow" @tap="onShowPay">
            当月电费：{{oderPay}}元(千瓦/1.5)
        </view>
        <view v-show="showPay">
            <view class="footer__btn">
                <view class="content">
                    <view class="item">当月费费用：{{oderPay}}元(千瓦/1.5)</view>
                    <view class="item">选择支付金额: 
                        <input class="input" type="number" v-model="money" maxlength="5">
                    </view>
                    <view class="money">￥{{money?money:0}}</view>
                    <view class="btnGroup">
                        <view class="btn display" @tap="onClosePay">取消</view>
                        <view class="btn" @tap="onSubmitPay">支付</view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import Mycalendar from "../../components/mycalendar";
import WaterPolo from "../../components/WaterPolo";
import Taro from "@tarojs/taro";
export default {
    name: "Index",
    components: { Mycalendar, WaterPolo },
    data() {
        return {
            dateSel: '',
            dateSel2: '',
            dateIndex: 1,
            userId: 0,

            month: 1,
            nowdate: 1,
            firstDate: 0,
            year: 2021,
            latest: {
                aData: "",
                createdAt: null,
                id: 1,
                pData: "",
                topic: "",
                total: "",
                updatedAt: null,
                userId: 0,
                vData: "",
            },
            orderList: [],
            orderListSel: null,
            NoData: false,

            money:'',
            showPay:false,
        }
    },
    onLoad() {
        let dateNow = new Date();
        this.year = dateNow.getFullYear();
        this.month = dateNow.getMonth() + 1;
        this.firstDate = new Date(this.year, this.month - 1, 1).getDay();
        this.nowdate = dateNow.getDate();

        this.dateSel = `${this.year}-${this.month}-${this.month}`;
        this.dateSel2 = `${this.year}-${this.month}-${this.month}`;
        console.log(this.nowdate, this.firstDate, this.month)


        let self = this;
        Taro.getStorage({
            key: 'userInfo',
            success: function (res) {
                console.log('getStorage', res.data)
                self.userId = res.data.userId;
                self.onGetLatest();
                self.onGetOrder();
            }
        })


    },
    onPullDownRefresh() {
        this.onGetLatest();
        this.onGetOrder();
    },
    computed: {
        monthCN() {
            let arr = ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二']
            return arr[this.month - 1]
        },
        oderPay(){
            let total = 0;
            if(!this.orderListSel) return 0;
            if(this.NoData) return 0;
            for(let i = 1;i<32;i++){
                total += this.orderListSel[`date_${i}`] ? Number(this.orderListSel[`date_${i}`]) : 0;
            }

            return total/1000*1.5;
        }
    },
    methods: {
        onGetLatest() {
            let self = this;
            Taro.request({
                url: 'http://159.75.72.220:10001/getLatest', //获取当前最新值
                method: 'POST',
                data: {
                    userId: self.userId
                },
                header: {
                    'content-type': 'application/json' // 默认值
                },
                success: function (res) {
                    self.latest = res.data.data[0];
                    Taro.stopPullDownRefresh();
                }
            })
        },
        onGetOrder() {
            let self = this;
            Taro.request({
                url: 'http://159.75.72.220:10001/orderInfo', //根据用户id获取数据
                method: 'POST',
                data: {
                    userId: self.userId
                },
                header: {
                    'content-type': 'application/json' // 默认值
                },
                success: function (res) {
                    self.orderList = res.data.data;
                    Taro.stopPullDownRefresh()

                    let flg = true;
                    self.orderList.map(item => {
                        if (item.month == self.month) {
                            self.orderListSel = item;
                            flg = false;
                            self.NoData = false;
                            console.log('orderItem', item.month, self.month)
                        }
                    })
                    console.log('flg==>', flg)
                    if (flg) {
                        self.NoData = true;
                    }
                }
            })
        },
        mylogin() {
            Taro.login({
                success: (res) => {
                    console.log("loginSuccess==>", res);
                    setTimeout(() => {
                        Taro.getUserInfo({
                            success: (res) => {
                                console.log("userInfo=>>", res);
                            },
                        });
                    }, 1000);
                },
                fail: (err) => {
                    console.log("err=>>", err);
                },
            });
        },
        onDateChange: function (e) {
            this.dateSel = e.detail.value;
            this.dateSel2 = e.detail.value;


            let datearr = e.detail.value.split('-');
            this.year = parseInt(datearr[0]);
            this.month = parseInt(datearr[1]);
            this.nowdate = parseInt(datearr[2]);

            this.onclickItem(this.nowdate)
            // 获取第一天星期几
            let dateObj = new Date(datearr[0], this.month - 1, '1');
            console.log(dateObj, '=>', dateObj.getDay())
            this.firstDate = dateObj.getDay();
            // 写死， 只有2021有数据
            if(this.year != '2021' ){
                this.NoData = true;
                return;
            }   

            let flg = true;
            let self = this;
            self.orderList.map(item => {
                if (item.month == self.month) {
                    self.orderListSel = item;
                    flg = false;
                    self.NoData = false;
                    console.log('orderItem', item.month, self.month)
                }
            })
            console.log('flg==>', flg)
            if (flg) {
                self.NoData = true;
            }

        },
        onclickItem(cDate) {
            let arr = this.dateSel2.split('-');
            this.dateSel2 = `${arr[0]}-${arr[1]}-${cDate}`;
            this.dateIndex = cDate;
        },
        onShowPay(){
            this.showPay = true;
        },
        onClosePay(){
            this.showPay = false;
            this.money = '';
        },
        onSubmitPay(){
            let self = this;
            Taro.request({
                url: 'http://159.75.72.220:10001/onPay', //根据用户id获取数据
                method: 'POST',
                data: {
                    id: Number(self.userId),
                    pay:self.money,
                    month:self.month
                },
                header: {
                    'content-type': 'application/json' // 默认值
                },
                success: function (res) {
                    console.log(res);
                    self.showPay = false;
                    self.money = '';
                    Taro.showToast({
                        title: '支付成功',
                        icon: 'success',
                        duration: 2000
                    })
                }
            })
        }
    },
};
</script>

<style lang="less">
page {
    background: url(../../asset/bg.jpg);
}
.index {
}
.index_header {
    // height: 30vh;
    // background-color: #ccc;
    display: flex;
    justify-content: space-around;
    padding: 20px;
}
.index_headerCenter {
    width: 200px;
    height: 200px;
}
.index_headerText {
    width: 300px;
    .item{
        color: #fff;
    }
}
.Mycalendarbox {
    width: 90vw;
    margin: 0 auto;
    border-radius: 3%;
    overflow: hidden;
    // border: 1px solid #000000;
    box-shadow: 0 0 5px #00000070;
}
.Mycalendarbox_header {
    padding-left: 20px;
    height: 100rpx;
    background-color: #59b8a3;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.Mycalendarbox_body {
    height: 90vw;
}

.page-section {
    display: inline-block;
    font-size: 25px;
    padding: 40px;
}
.calenShow {
    margin: 20px 0px;
    height: 50px;
    padding: 10px 40px;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.829);
    box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.137);
}
.footer__btn{
    position: fixed;
    display: flex;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.548);
    .content{
        position: absolute;
        width: 80%;
        height: 60%;
        padding: 20px;
        background: rgb(241, 241, 241);
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        border-radius: 15px;
    }
    .item{
        display: flex;
        background: #fff;
        padding: 25px 20px;
        border-radius: 15px;
        margin-bottom: 20px;
    }
    .input{
        margin-left: 15px;
        flex: 1;
    }
    .money{
        text-align: center;
        margin-bottom: 30px;
        height: 100px;
        font-size: 80px;
        font-weight: 600;
    }
    .btnGroup{
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 35px;
    }
    .btn{
        width: 40%;
        height: 85px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: green;
        color: #fff;
        border-radius: 15px;
        margin-right: 20px;

        &:last-child{
            margin-right: 0;
        }
        &.display{
            background-color: rgba(85, 85, 85, 0.856);
            // color: rgba(49, 49, 49, 0.2);
        }
    }
}
</style>
